<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Ant Design Vue</title>
	<link rel="stylesheet" href="./static/css/reset.css">
	<script src="./static/js/vue.global.prod.js"></script>
	<script src="./static/js/antd.min.js"></script>
	<script src="./static/js/icons-vue.js"></script>
<style>
#app{
	height: 100%;
}
.layout-container{
	/* background-color: red; */
	display: flex;
	flex-direction: column;
	height: 100%;
}
.layout-header{
	display: flex;
	align-items: center;
	padding: 0px 40px 0px 0px;
	border-bottom: 1px solid rgb(230, 230, 230);
	margin-bottom: 8px;
	width: 100%;
	height: 60px;
}
.layout-content{
	/* flex: auto; */
	display: flex;
}
.layout-menu{
	width: 200px;
	height: 100%;
	/* border-top: 1px solid #e6e6e6; */
	/* border-right: 1px solid #e6e6e6; */
	/* border-top-right-radius: 4px; */
	overflow: hidden;
}
.leftmenu{
	overflow-y: scroll;
}
.layout-main{
	flex: auto;
	height: 100%;
	margin-left: 8px;
	border-left: 1px solid #E6E6E6;
	border-top: 1px solid #E6E6E6;
	border-top-left-radius: 4px;
}

.logo {
	width: 200px;
	height: 100%;
}
.span-logo {
    font-weight: bold;
    font-size: 22px;
    line-height: 60px;
    margin-left: 28px;
    color: #409eff;
}
.menudiv{
	flex: auto;
	display: flex;
}
.menudiv span{
	font-size: 16px;
}
.menudiv1{
	
}
.menudiv2{
	
}
.headermenu{
	line-height: 60px;
}
.setdiv{
	display: flex;
	align-items: center;
}
.setitem{
	margin-left: 8px;
}
.color-lan{
	color: #006BFF;
}
.font14{
	font-size: 14px;
}
.logout{
	padding: 6px 3px 0px 3px;
	background-color: red;
	color: #ffffff;
	border-radius: 5px;
}
.logout > svg{
	width: 20px;
}
.is-pull{
	width: 20px;
	height: 22px;
}

.layui-body {
	height: 100%;
	box-sizing: border-box;
	/* background-color: white; */
	/* margin-top: 8px; */
	/* margin-left: 8px; */
	padding-left: 16px;
	padding-top: 8px;
}
</style>
</head>
<body>
<div id="app" style="overflow: hidden;">
	<div class="layout-container">
		<div class="layout-header">
			<div class="logo">
				<span class="span-logo">Bridgee 企桥</span>
				<!-- <img src="static/image/element-logo.png" alt=""> -->
			</div>
			<div class="menudiv">
				<div class="menudiv1">
					<a-menu v-model:selected-Keys="current" mode="horizontal" :items="itemsNav" @click="navClick" @open-Change="onOpenChange" class="headermenu"></a-menu>
				</div>
				<div class="menudiv2">
					<a-button @click="openThis()" type="link" style="line-height: 48px;">单独打开</a-button>
				</div>
			</div>
			<div class="setdiv">
				<div class="setitem">
					<a-dropdown>
						<a class="item-center font14" @click="myClick('级联菜单')">
							级联菜单<arrow-down class="aut-icon"></arrow-down>
						</a>
						<template #overlay>
							<a-menu @click="handleMenuClick">
								<a-menu-item key="1st">1st menu item</a-menu-item>
								<a-menu-item key="2nd">2nd menu item</a-menu-item>
								<a-menu-divider></a-menu-divider>
								<a-sub-menu key="sub1" title="sub menu" @click="myClick('sub1')">
									<a-menu-item key="3rd">3rd menu item</a-menu-item>
									<a-menu-item key="4th">4th menu item</a-menu-item>
									<a-menu-item key="5th"><a href="https://www.baidu.com/" target="_blank">百度</a></a-menu-item>
								</a-sub-menu>
								<a-sub-menu key="sub2" title="disabled sub menu" disabled>
									<a-menu-item>5d menu item</a-menu-item>
									<a-menu-item>6th menu item</a-menu-item>
								</a-sub-menu>
							</a-menu>
						</template>
					</a-dropdown>
				</div>
				<div class="setitem">
					<a-avatar src="./static/img/user.png"></a-avatar>
				</div>
				<div class="setitem">
					<a-dropdown>
						<a class="color-lan item-center font14" @click="myClick('级联菜单')">
							级联菜单<arrow-down class="aut-icon"></arrow-down>
						</a>
						<template #overlay>
							<a-menu @click="handleMenuClick">
								<a-menu-item key="1st">1st menu item</a-menu-item>
								<a-menu-item key="2nd">2nd menu item</a-menu-item>
								<a-menu-divider></a-menu-divider>
								<a-sub-menu key="sub1" title="sub menu" @click="myClick('sub1')">
									<a-menu-item key="3rd">3rd menu item</a-menu-item>
									<a-menu-item key="4th">4th menu item</a-menu-item>
									<a-menu-item key="5th"><a href="https://www.baidu.com/" target="_blank">百度</a></a-menu-item>
								</a-sub-menu>
								<a-sub-menu key="sub2" title="disabled sub menu" disabled>
									<a-menu-item>5d menu item</a-menu-item>
									<a-menu-item>6th menu item</a-menu-item>
								</a-sub-menu>
							</a-menu>
						</template>
					</a-dropdown>
				</div>
				<div class="setitem">
					<i class="logout" title="退出系统" @click="logout_fn">
						<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-78e17ca8=""><path fill="currentColor" d="M352 159.872V230.4a352 352 0 1 0 320 0v-70.528A416.128 416.128 0 0 1 512 960a416 416 0 0 1-160-800.128z"></path><path fill="currentColor" d="M512 64q32 0 32 32v320q0 32-32 32t-32-32V96q0-32 32-32z"></path></svg>
					</i>
				</div>
			</div>
		</div>
		
		<div class="layout-content">
			<div class="layout-menu" :style="menuWidth">
				<a-button style="margin-bottom: 0px" @click="toggleCollapsed" block>
					<expand v-if="stateMenu.collapsed" class="is-pull"></expand>
					<fold v-else class="is-pull"></fold>
				</a-button>
				<div class="leftmenu" :style="leftMenuStyle">
					<a-menu v-model:open-Keys="stateMenu.openKeys" v-model:selected-Keys="stateMenu.selectedKeys" mode="inline" theme="light"
						:inline-collapsed="stateMenu.collapsed" :items="itemsMenu" @click="menuClick" @open-Change="onOpenChange"></a-menu>
				</div>
			</div>
			<div class="layout-main">
				<div class="layui-body" id="iframe_div">
					<iframe :src="main_url" id="iframe_body" frameborder="0" width="100%"seamless height="100%"></iframe>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
<script>
let inner_h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
const Main = {
data() {
	return {
		Vue: Vue,
		Icons: ElementPlusIconsVue,
		
		current: ['../antd/antd.html'],
		itemsNav: [
			{
				key: '../element/index0.html',
				icon: () => Vue.h(ElementPlusIconsVue.FolderRemove, {class: "aut-icon"}),
				label: Vue.h('a', { href: '../element/index0.html', target: '_self' }, 'Element-3'),
				title: 'ElementPlus-Vue3',
			},
			{
				key: '../echarts/echarts.html',
				icon: () => Vue.h(ElementPlusIconsVue.Grid, {class: "aut-icon"}),
				label: Vue.h('a', { href: '../echarts/echarts.html', target: '_self' }, 'Echarts'),
				title: 'Echarts',
			},
			{
				key: '../css/css.html',
				icon: () => Vue.h(ElementPlusIconsVue.CopyDocument, {class: "aut-icon"}),
				label: Vue.h('a', { href: '../css/css.html', target: '_self' }, 'CSS'),
				title: 'CSS - 实例系统',
			},
			{
				key: '../antd/antd.html',
				label: Vue.h('a', { href: '../antd/antd.html', target: '_self' }, 'Ant Design Vue'),
				title: 'Ant Design Vue系统',
			},
			{
				key: 'sub1',
				icon: () => Vue.h(ElementPlusIconsVue.Share, {class: "aut-icon"}),
				label: '子系统集',
				title: 'Navigation Three - Submenu',
				children: [
					{type: 'group',label: 'Item 1',key: 'ate',
						children: [
							{label: 'Option 1',key: 'setting:1',},
							{label: 'Option 2',key: 'setting:2',},
						],
					},
					{type: 'group',label: 'Item 2',
						children: [
							{label: 'Option 3',key: 'setting:3',},
							{label: 'Option 4',key: 'setting:4',},
						],
					},
				],
			},
			{key: 'doSomething', label: Vue.h('span', {class: ''}, 'doSome'), title: '干点什么。', },
		],
		
		// contentStyle: {height: '800px',},
		menuWidth: {width: '200px', },
		leftMenuStyle: {width: '217px'},
		stateMenu: {
			collapsed: false,
			selectedKeys: ['base/Button.html'],
			openKeys: ['base', 'other',],
			preOpenKeys: ['base'],
		},
		itemsMenu: [
			{
				icon: () => Vue.h(ElementPlusIconsVue.Grid, {class: "aut-icon"}),
				key: 'base', label: '通用', title: '通用组件',
				children: [
					{key: 'base/Button.html',label: 'Button 按钮',title: '按钮组',},
					{key: 'sub3',label: 'Icon 图标',title: 'Icon 图标',
						children: [
							{key: 'base/icon_ant1.html',label: 'Ant的线框风格',title: '线框风格',},
							{key: 'base/icon_ant2.html',label: 'Ant的实底风格',title: '实底风格',},
							{key: 'base/icon_ant3.html',label: 'Ant的双色风格',title: '双色风格',},
							{key: 'base/icon_el.html',label: 'ElementUI的',title: 'icons-vue.js里面的',},
						],
					},
					{key: 'base/Typography.html',label: 'Typography 排版',title: '',},
					{key: 'nopage-1',label: Vue.h('a', { href: 'https://www.baidu.com', target: '_blank' }, '百度一下'),title: '打开百度',},
					{key: 'nopage-2',label: Vue.h('a', { href: 'https://www.jd.com', target: '_blank' }, '京东商城'),title: '进入京东',},
				],
			},
			{
				icon: () => Vue.h(ElementPlusIconsVue.Refrigerator, {class: "aut-icon"}),
				key: 'layout', label: '布局', title: '',
				children: [
					{key: 'layout/Divider.html',label: 'Divider 分割线',},
					{key: 'layout/Flex.html',label: 'Flex 弹性布局',},
					{key: 'layout/Grid.html',label: 'Grid 栅格',},
					{key: 'layout/Layout.html',label: 'Layout 布局',},
					{key: 'layout/Space.html',label: 'Space 间距',},
				],
			},
			{
				icon: () => Vue.h(ElementPlusIconsVue.Guide, {class: "aut-icon"}),
				key: 'nav', label: '导航', title: '',
				children: [
					{key: 'nav/Anchor.html',label: 'Anchor 锚点',},
					{key: 'nav/Breadcrumb.html',label: 'Breadcrumb 面包屑',},
					{key: 'nav/Dropdown.html',label: 'Dropdown 下拉菜单',},
					{key: 'nav/Menu.html',label: 'Menu 导航菜单',},
					{key: 'nav/PageHeader.html',label: 'PageHeader 页头',},
					{key: 'nav/Pagination.html',label: 'Pagination 分页',},
					{key: 'nav/Steps.html',label: 'Steps 步骤条',},
				],
			},
			{
				icon: () => Vue.h(ElementPlusIconsVue.Edit, {class: "aut-icon"}),
				key: 'data_in', label: '数据录入', title: '数据录入组件',
				children: [
					{key: 'data_in/AutoComplete.html',label: 'AutoComplete 自动完成',},
					{key: 'data_in/Cascader.html',label: 'Cascader 级联选择',},
					{key: 'data_in/Checkbox.html',label: 'Checkbox 多选框',},
					{key: 'data_in/DatePicker.html',label: 'DatePicker 日期选择框',},
					{key: 'data_in/Form1.html',label: 'Form 表单1',},
					{key: 'data_in/Input.html',label: 'Input 输入框',},
					{key: 'data_in/InputNumber.html',label: 'InputNumber 数字输入框',},
					{key: 'data_in/Mentions.html',label: 'Mentions 提及',},
					{key: 'data_in/Radio.html',label: 'Radio 单选框',},
					{key: 'data_in/Rate.html',label: 'Rate 评分',},
					{key: 'data_in/Select.html',label: 'Select 选择器',},
					{key: 'data_in/Slider.html',label: 'Slider 滑动输入条',},
					{key: 'data_in/Switch.html',label: 'Switch 开关',},
					{key: 'data_in/TimePicker.html',label: 'TimePicker 时间选择框',},
					{key: 'data_in/Transfer.html',label: 'Transfer 穿梭框',},
					{key: 'data_in/TreeSelect.html',label: 'TreeSelect 树选择',},
					{key: 'data_in/Upload1.html',label: 'Upload 上传1',},
				],
			},
			{
				icon: () => Vue.h(ElementPlusIconsVue.Document, {class: "aut-icon"}),
				key: 'data_out', label: '数据展示', title: '数据展示组件',
				children: [
					{key: 'data_out/Avatar.html',label: 'Avatar 头像',},
					{key: 'data_out/Badge.html',label: 'Badge 徽标数',},
					{key: 'data_out/Calendar.html',label: 'Calendar 日历',},
					{key: 'data_out/Card.html',label: 'Card 卡片',},
					{key: 'data_out/Carousel.html',label: 'Carousel 走马灯',},
					{key: 'data_out/Collapse.html',label: 'Collapse 折叠面板',},
					{key: 'data_out/Comment.html',label: 'Comment 评论',},
					{key: 'data_out/Descriptions.html',label: 'Descriptions 描述列表',},
					{key: 'data_out/Empty.html',label: 'Empty 空状态',},
					{key: 'data_out/Image.html',label: 'Image 图片',},
					{key: 'data_out/List.html',label: 'List 列表',},
					{key: 'data_out/Popover.html',label: 'Popover 气泡卡片',},
					{key: 'data_out/QRCode.html',label: 'QRCode 二维码',},
					{key: 'data_out/Segmented.html',label: 'Segmented 分段控制器',},
					{key: 'data_out/Statistic.html',label: 'Statistic 统计数值',},
					{key: 'data_out/Table1.html',label: 'Table1 表格',},
					{key: 'data_out/Tabs.html',label: 'Tabs 标签页',},
					{key: 'data_out/Tag.html',label: 'Tag 标签',},
					{key: 'data_out/Timeline.html',label: 'Timeline 时间轴',},
					{key: 'data_out/Tooltip.html',label: 'Tooltip 文字提示',},
					{key: 'data_out/Tour.html',label: 'Tour 漫游式引导',},
					{key: 'data_out/Tree.html',label: 'Tree 树形控件',},
				],
			},
			{
				icon: () => Vue.h(ElementPlusIconsVue.ChatLineSquare, {class: "aut-icon"}),
				key: 'feedback', label: '反馈', title: '',
				children: [
					{key: 'feedback/Alert.html',label: 'Alert 警告提示',},
					{key: 'feedback/Drawer.html',label: 'Drawer 抽屉',},
					{key: 'feedback/Message.html',label: 'Message 全局提示',},
					{key: 'feedback/Modal.html',label: 'Modal 对话框',},
					{key: 'feedback/Notification.html',label: 'Notification 通知提醒框',},
					{key: 'feedback/Popconfirm.html',label: 'Popconfirm 气泡确认框',},
					{key: 'feedback/Progress.html',label: 'Progress 进度条',},
					{key: 'feedback/Result.html',label: 'Result 结果',},
					{key: 'feedback/Skeleton.html',label: 'Skeleton 骨架屏',},
					{key: 'feedback/Spin.html',label: 'Spin 加载中',},
				],
			},
			{
				icon: () => Vue.h(ElementPlusIconsVue.Coordinate, {class: "aut-icon"}),
				key: 'other', label: '其他', title: '其他组件',
				children: [
					{key: 'other/Affix.html',label: 'Affix 固钉',},
					{key: 'other/FloatButton.html',label: 'FloatButton 悬浮按钮',},
					{key: 'other/Watermark.html',label: 'Watermark 水印',},
					
				],
			},
		],
		
		main_url: 'base/Button.html',
		
	}
},
mounted: function(){
	//实例挂载完成后被调用
	// console.log("实例挂载完成后被调用");
	// console.log(inner_h);
	// this.contentStyle.height = (inner_h - 68) + "px";
	this.leftMenuStyle.height = (inner_h - 68 - 32) + "px";
	
	this.$nextTick(function () {
		// 仅在整个视图都被渲染之后才会运行的代码
		// console.log("仅在整个视图都被渲染之后才会运行的代码");
		
	});
	// console.log("实例挂载完成后被调用2");
},
computed:{
	
},
methods:{
	onOpenChange(openKeys){
		console.log('openKeys', openKeys);
	},
	navClick(e){
		console.log('navClick', e);
		let key = e.key;
		if(key == 'doSomething'){
			// window.open(this.main_url, "_blank");
			alert('doSomething！')
		}
	},
	openThis(){
		window.open(this.main_url, "_blank");
	},
	menuClick(e){
		// console.log('menuClick', e);
		let key = e.key;
		let pre = key.substr(0, 6);
		if(pre == 'nopage'){
			// 跳转到指定页面
		}else{
			this.main_url = key;
		}
	},
	
	myClick(val){
		console.log(`myClick：${val}`);
	},
	handleMenuClick(e){
		console.log('handleMenuClick', e);
	},
	logout_fn(){
		alert('logout');
	},
	toggleCollapsed(){
		this.stateMenu.collapsed = !this.stateMenu.collapsed;
		// this.stateMenu.openKeys = this.stateMenu.collapsed ? [] : this.stateMenu.preOpenKeys;
		if(this.stateMenu.collapsed){
			this.menuWidth = {width: '80px',};
		}else{
			this.menuWidth = {width: '200px',};
		}
		
	},
	
}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
